<template>
  <el-dialog title="导入数据" :close-on-click-modal="false" :visible.sync="visible"
    class="JNPF-dialog JNPF-dialog_center" lock-scroll width="600px" append-to-body>
    <el-row>
      <el-col :span="12" class="grid-content">
        <p>下载导入模板，填写数据</p>
        <img src="@/assets/images/xsl1.png" alt="">
        <p>
          <el-button type="primary" round @click="downLoad()">下载导入模板</el-button>
        </p>
      </el-col>
      <el-col :span="12" class="grid-content">
        <p>上传填写好的文件</p>
        <img src="@/assets/images/xsl1.png" alt="">
        <p>
          <el-upload
            :action="uploadUrl"
            :data="additionalData"
            :headers="uploadHeader" :on-success="handleSuccess"
            :show-file-list="false" accept=".xls,.xlsx" :before-upload="beforeUpload">
            <el-button type="primary" round :loading="btnLoading">上传文件</el-button>
            <!-- <div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件，且不超过500kb</div> -->
          </el-upload>
        </p>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { getTemplate, importModel } from '@/api/onlineDev/visualDev'
import object from 'element-resize-detector/src/detection-strategy/object'
export default {
  props: ['customImportAndExportApi','relationInfo'],
  data() {
    return {
      visible: false,
      btnLoading: false,
      modelId: '',
      uploadUrl:'',
      uploadHeader:{},
      additionalData:{}
    }
  },
  methods: {
    init(modelId) {
      if (!modelId) return
      this.visible = true
      this.modelId = modelId
      this.uploadUrl = this.define.comUrl+'/api/visualdev/OnlineDev/'+ modelId +'/ImportData'
      this.uploadHeader = { Authorization: this.$store.getters.token}
      
      debugger
      if(this.customImportAndExportApi&&this.customImportAndExportApi.customImportApi){
        this.uploadUrl = this.customImportAndExportApi.customImportApi
        let userInfo = this.$store.state.user.userInfo
        if(userInfo){
          let { userId, organizeId, organizeName, positionIds, roleIds, roleName, userAccount, userName } = userInfo
          this.uploadHeader = { Authorization: this.$store.getters.token,uid:userId, oid:organizeId, rn:encodeURIComponent(roleName) }
        }
      }
      /**
       * by jdeng for 子表导入需要带入与主表的关联字段的值
       */
      if(this.relationInfo && this.relationInfo instanceof Object){
        let {foreignField,foreignId} = this.relationInfo
        this.additionalData = {
          foreignField,
          foreignId
        }
      }
    },
    // 下载模板
    downLoad() {
      this.$emit('download', {msg:'正在下载'})
      if(this.customImportAndExportApi&&this.customImportAndExportApi.customTempDownloadApi){
        this.jnpf.downloadFile(this.customImportAndExportApi.customTempDownloadApi)
      }else{
        getTemplate(this.modelId).then(res => {
          this.jnpf.downloadFile(res.data.url)
        })
      }
    },

    beforeUpload() { this.btnLoading = true },
    handleSuccess(res, file) {
      this.btnLoading = false
      debugger
      if (res.code == 200) {
        if(res.data&&res.data.url){
          this.$message({
            message: '导入完成，正在下载错误数据...',
            type: 'success',
            duration: 1000,
            onClose: () => {
              this.visible = false
              this.$emit('refreshDataList', true)
            }
          })
          this.jnpf.downloadFile(res.data.url)
        }else{
          this.$message({
            message: '导入成功',
            type: 'success',
            duration: 1000,
            onClose: () => {
              this.visible = false
              this.$emit('refreshDataList', true)
            }
          })
        }  
      } else {
        this.$message({ message: '导入失败', type: 'error', duration: 1000 })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 40px 30px !important;
}

.grid-content {
  &:first-child {
    border-right: 1px solid #dcdfe6;
  }

  text-align: center;

  p {
    text-align: center;
  }

  img {
    width: 128px;
    margin: 10px 0;
  }
}
</style>